<template>
  <div class="header">
    <!-- 左侧标题 -->
    <div class="header-left">
      <icons
        v-if="$route.meta.title === '首页'"
        class="icon-menu"
        :name="showDrawer ? 'ammenu' : 'mmenu'"
        @click="openDrawer"
      />
      <icons v-else class="icon-menu" name="back" @click="backPage" />
    </div>
    <!-- 右侧LOGO -->
    <div class="title">
      <div class="title-view">
        <span v-if="systemInfo.systemName && $route.meta.title === '首页'">{{
          systemInfo.systemName
        }}</span>
        <span v-else>{{ name }}</span>
      </div>
    </div>
    <div
      v-if="logoInfo.logoParamas.content && token && !template.mobile"
      class="right-txt"
      @click="clickLogo"
    >
      <img
        v-if="logoInfo.logoParamas.type === 'picture'"
        class="log-img"
        :src="logoInfo.logoParamas.content"
        alt=""
      />
      <div v-else class="log-text">{{ logoInfo.logoParamas.content }}</div>
    </div>
    <div v-else class="right-txt"></div>
  </div>
  <!-- 侧边抽屉 -->
  <Drawer />
</template>
<script lang="ts" setup>
import { ref, watch, computed, reactive, onMounted } from "vue";
import Drawer from "@/components/Sidebar/mIndex.vue";
import { useAppStore } from "@/store/modules/user";
import { tmpStore } from "@/store/modules/template";
import { useRouter, useRoute } from "vue-router";
import { GetLogo, GetSystemFont, GetPageModelByToken } from "@/server";
const router = useRouter();
const route = useRoute();
const template = tmpStore();
const store = useAppStore();
const logoTxt = ref(""); //文字logo
const logoImg = ref(""); //图片logo
const showModal = ref(false); //展示弹窗
const systemInfo = computed(() => template.systemData);
const token = computed(() => store.token);
const showDrawer = computed(() => store.showDrawer);
const name = computed(() => route.params.type || route.meta.title);
const logoInfo = reactive({
  logoParamas: {
    type: "picture", //picture/text
    content: "", //logo内容
    font: "", //字体
    size: "", //字体大小
    color: "", //字体颜色
    isBold: false, //是否粗体
    companyId: 1,
  },
});
/**
 * @description: 获取模版信息
 * @return {*}
 * @author: cool panda
 */
const GetPageModelByTokenFun = async () => {
  const res: any = await GetPageModelByToken({});
  if (res.result.isSuccess) {
    template.setMnue(res.result.result);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const previewFileList = ref([]) as any; //logo
//打开侧边栏
const openDrawer = () => {
  store.openMenu(!showDrawer.value);
};
const backPage = () => {
  router.back();
};
//点击编辑LOGO
const clickLogo = () => {
  if (store.superUser < 2) {
    showModal.value = true;
  }
};
//获取logo
const getLogoFun = async () => {
  const res: any = await GetLogo({});
  if (res.result.isSuccess) {
    logoInfo.logoParamas = res.result.result;
    if (logoInfo.logoParamas.type === "string" || !logoInfo.logoParamas.type) {
      logoInfo.logoParamas.type = "text";
    }
    if (logoInfo.logoParamas.type === "picture") {
      logoImg.value = logoInfo.logoParamas.content;
      previewFileList.value = [
        {
          id: "1",
          name: "",
          status: "finished",
          url: logoImg.value,
        },
      ];
    } else {
      logoTxt.value = logoInfo.logoParamas.content;
    }
  } else {
    // store.error(res.result.message); // 错误提示
  }
};
//获取系统设置信息
const getSystemFontFun = async () => {
  const res: any = await GetSystemFont({ Token: "" });
  if (res.result.isSuccess) {
    template.setSystemInfo(res.result.result);
  } else {
    // store.error(res.result.message); // 错误提示
  }
};
//token变动重新获取数据
watch(
  () => token.value,
  (val) => {
    if (val) {
      GetPageModelByTokenFun();
      getLogoFun();
      getSystemFontFun();
    } else {
      logoInfo.logoParamas = {
        type: "picture", //picture/text
        content: "", //logo内容
        font: "", //字体
        size: "", //字体大小
        color: "", //字体颜色
        isBold: false, //是否粗体
        companyId: 1,
      };
      template.setSystemInfo(null);
      template.setMnue([]);
      store.setUserInfo(null);
    }
  }
);
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  height: 2.4rem;
  color: #ffffff;

  .header-left {
    display: flex;
    align-items: center;

    .icon-menu {
      width: 2rem;
      height: 2rem;
    }
  }
  .title {
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    .title-view {
      display: flex;
    }

    // color: #fff;
    .edit-icon {
      margin-left: 5px;
    }
  }
  .header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 113px;
    height: 3.5rem;
    // color: #fff;
    background-color: #394248;

    .edit-icon {
      width: 1.5rem;
      height: 1.5rem;
      margin: 5px 0;
    }
  }
  .right-txt {
    min-width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    .log-img {
      height: 1.5rem;
      object-fit: contain;
    }
    .log-text {
      font-size: 1.2rem;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #ffffff;
      line-height: 1.8rem;
    }
  }
}
</style>
